<template>
    <div class="page-container h-100">
        <div class="table-container table-box globalDiv">
            <BaseGlobalTable
                    :table_config="table_config"
                    @addTableData="addTableData"
                    @tableOnload="searchTableOnload"
                    @searchDevice="searchDevice"
                    @handleSelectionChange="handleSelectionChange"
                    @handelDetail="handelDetail"
                    @handelConfig="handelConfig"
                    @handelBackups="handelBackups"
                    @handelRestore="handelRestore"
                    @handelCh="handelCh"
                    @handelUnbind="handelUnbind"
                    ref="globalTable"
            ></BaseGlobalTable>
        </div>
        <addDevice :addFlag.sync='addFlag' v-if="addFlag"></addDevice>
        <config :editTableRow='editTableRow' :configFlag.sync='configFlag' v-if="configFlag"></config>
        <search :searchFlag.sync='searchFlag' v-if="searchFlag"></search>
    </div>
</template>

<script>
    import {deviceTypeList} from '@/assets/common/js/utils/deviceConfig.js'
    //  设备管理组件
    import addDevice from './add';
    //  网络参数组件
    import config from './config';
    // 设备搜索组件
    import search from './search';
    import { sbglDevDelete, sbglDevStartdatabackup, sbglDevRestorebackup, fileShowSaveDialog, fileShowOpenDialog,deviceinfoGetlist } from '@/api/sbgl'//引入接口
    export default {
        name: "sbgl_index",
        components: {
            addDevice,
            config,
            search
        },
        props: {},
        data() {
            return {
              deadline4:new Date().getTime()+30000,
              devImgNames:['rn','hm','zjm'],
                searchFlag:false,
                addFlag:false,
                configFlag:false,
                dialogUploadVisible:null,
                dialogImageUrl:null,
                detailData:null,
                formData:null,
                dialogVisible:false,
                detaildialogVisible:false,
                formAdd: {
                    workOrderJson:{
                        "deviceNumber":"",
                        "repairReason":"",
                        "contacts":"",
                        "contactNumber":""
                    }
                },
                tableData: [],
                // 数据分析
                table_config: {
                    table_tbody: [
                    ],
                    thead: [
                        {label: "序号", prop: "@id", type: "index", width: "100"},
                        // 产品图
                        {label: this.i18n.t('Product picture'),width:"270", prop: "workOrderState", align: "center", type:'function',callback:(row) => {
                                var imgSrc=this.devImgs[row.deviceType]
                                return "<div style='text-align: center'><img src="+imgSrc+" /></div>"
                                // return "<el-image style='width: 100px;height: 100px;' src='"+imgSrc+"' fit='contain'></el-image>"
                            }},
                        // 设备名称
                        {label: this.i18n.t('Device name'), prop: "deviceName",type:'function',callback:(row) => {
                                // return row.deviceName||'-'
                                return row.deviceName||'-'
                            }},
                        // 设备类型
                        {label: this.i18n.t('Device type'), prop: "deviceType",type:'function',callback:(row) => {
                            return this.i18n.t(this.devOptions[row.deviceType].label)
                            }},
                        // 状态
                        {label: this.i18n.t('status'), prop: "isOnline",type:'function',callback:(row) => {
                                return row.isOnline == 1 ? this.i18n.t('on line') : this.i18n.t('offline')
                            }},
                        // 序列号
                        {label: this.i18n.t('Serial number'), prop: "deviceCode",type: "function",callback:(row) => {
                                return row.deviceCode||'-'
                            }},
                        {
                            // 操作
                            label: this.i18n.t('operation'),
                            prop: "operation",
                            // 当前列的类型，不填为直接渲染文本，function 为调用回调函数，operation 为操作按钮，image 为显示图片
                            type: "operation",
                            width: 180,
                            // 按钮的风格，为 true 则显示自定义图标，为 false 显示 按钮样式
                            icon: true,
                            // 图标风格按钮列表
                            iconClass: [
                                {
                                    type: "detail",
                                    class: "iconfont-KUI icon-canshupeizhi",
                                    title: this.i18n.t('Network parameter'),//网络参数
                                    callback: "handelConfig",
                                    customIcon:true,
                                    power: "",
                                },
                                // {
                                //     type: "detail",
                                //     class: "el-icon-document-copy",
                                //     title: "开启备份",
                                //     callback: "handelBackups",
                                //     customIcon:true,
                                //     power: "",
                                // },
                                // {
                                //     type: "detail",
                                //     class: "el-icon-receiving",
                                //     title: "数据恢复",
                                //     callback: "handelRestore",
                                //     customIcon:true,
                                //     power: "",
                                // },
                                {
                                    type: "detail",
                                    class: "iconfont-KUI icon-jiebang1",
                                    title: this.i18n.t('unbind'),//解除绑定
                                    callback: "handelUnbind",
                                    customIcon:true,
                                    power: "",
                                }
                            ],
                        },
                    ],
                    tableButtonArr: [
                        {
                            iconClass: "icon-search iconfont-KUI",
                            btnType: 2,
                            text: this.i18n.t('search'),//搜索
                            callback: "searchDevice",
                            power: "search",
                            customIcon:true
                        },
                        {
                            iconClass: "icon-plus-circle iconfont-KUI",
                            btnType: 2,
                            text: this.i18n.t('Add'),//添加
                            callback: "addTableData",
                            power: "add",
                            customIcon:true
                        }
                    ],
                    // 列表前面是否需要显示 checkbox 框，如要显示 值写成 true
                    checkbox: false,
                    index: true,
                    showPagination: false, // 翻页器
                    // 请求表格数据的 url ，可直接传入
                    // url: 'deviceinfo/getlist',
                    // 请求表格数据的 方式
                    // method: "post",
                    //表格 title 文字
                    tableTitle: false,
                    //是否需要给 th 加 样式boder 如果需要加上addBoderClass 不需要显示空或者不加这个字段配置
                    addBoderClass: "addBoderClass",
                    roleList: [],
                },
                selectRow: [],
                devImgs: [
                    require('@/assets/common/img/dev/rn.png'),
                    require('@/assets/common/img/dev/hm.png'),
                    require('@/assets/common/img/dev/zjm.png'),
                ],
                imgList:null,
                deviceidList:null,
                form:{
                    pageNumber:1,
                    pageSize:999
                },
                devListInterval:null,
                devOptions:null
            };
        },
        computed: {},
        watch: {},
        beforeDestroy() {
            clearInterval(this.devListInterval)
        },
        mounted() {
          this.deviceinfoGetlist()
            this.setTableHeight()
            this.devOptions=deviceTypeList
            this.$refs.globalTable.loading_data(this.form)
            // this.deviceinfoGetlist()
            clearInterval(this.devListInterval)
          this.devListInterval=setInterval(this.deviceinfoGetlist,5000)
            window.onresize = ()=>{
                this.setTableHeight()
            }
        },
        methods: {
          hilarity() {
            console.log('30秒时间已到');
            // this.$notify({
            //   title: "提示",
            //   message: "时间已到",
            //   duration: 0,
            // });
          },
            setTableHeight(){
                this.$set(this.table_config,'height',window.innerHeight-215)
            },
            deviceinfoGetlist(){
                deviceinfoGetlist(this.form).then((res) => {
                    if (res.code == 200) {
                        this.table_config.table_tbody=res.data.values
                        this.$refs.globalTable.loading_data()
                    }
                }).catch().finally(() => {})
            },
            searchTableOnload(){

            },
            // 刷新列表
            parentUpdate(){
                this.$refs.globalTable.loading_data();
            },
            // 恢复备份回调
            sbglDevRestorebackup(params, str){
                sbglDevRestorebackup(params, str).then((res) => {
                    this.G.exportFile(res, '备份' + new Date().toLocaleString())
                    if (res.code === 200) {
                        this.W.$tips("success", '开启备份成功！');
                    }
                }).catch().finally(() => {})
            },
            // 选择保存路径
            fileShowOpenDialog(params, row){
                fileShowOpenDialog(params).then((res) => {
                    if (res.code === 200) {
                        this.sbglDevRestorebackup(row.deviceCode, res.data)
                    }
                }).catch().finally(() => {
                })
            },
            // 恢复
            handelRestore(row){
                let params = {
                    title: "请选择文件路径",
                    defaultPath: "",
                    buttonLabel: "",
                    filters: [
                        {
                            extensions: ['zip', 'rar'],
                            name: ""
                        }
                    ],
                    message: "",
                    nameFieldLabel: "",
                    showsTagField: true
                }
                this.fileShowOpenDialog(params, row)
            },
            // 备份回调
            sbglDevStartdatabackup(params, str){
                sbglDevStartdatabackup(params, str).then((res) => {
                    this.G.exportFile(res, '备份' + new Date().toLocaleString())
                    if (res.code === 200) {
                        this.W.$tips("success", '开启备份成功！');
                        this.parentUpdate();
                    }
                }).catch().finally(() => {})
            },
            // 选择保存路径
            fileShowSaveDialog(params, row){
                fileShowSaveDialog(params).then((res) => {
                    if (res.code === 200) {
                        this.sbglDevStartdatabackup(row.deviceCode, res.data)
                    }
                }).catch().finally(() => {
                })
            },
            // 备份
            handelBackups(row){
                // this.W.$tips('warning', '未实现');
                let params = {
                    title: "请选择文件路径",
                    defaultPath: "",
                    buttonLabel: "",
                    filters: [
                        {
                            extensions: ['zip', 'rar'],
                            name: ""
                        }
                    ],
                    message: "",
                    nameFieldLabel: "",
                    showsTagField: true
                }
                this.fileShowSaveDialog(params, row)
            },
            // 解绑回调
            sbglDevDelete(params){
                sbglDevDelete(params).then((res) => {
                    if (res.code === 200) {
                        // 解绑成功
                        this.W.$tips("success", this.i18n.t('Unbind successfully'));
                        this.parentUpdate();
                    }
                }).catch().finally(() => {
                })
            },
            // 解绑
            handelUnbind(row){
                console.log(row);
                // 确定要解绑?解绑后，此设备将从列表中删除
                this.W.$myConfirm('warning', this.i18n.t('Are you sure to unbind')+' <span style="color: red;font-weight: bold">'+row.deviceName+'</span> ？<br>'+this.i18n.t('After unbinding, this device will be removed from the list!'))
                    .then(async _ => {
                        this.sbglDevDelete(row)
                    })
                    .catch(_ => { });
            },
            // 设置网络参数
            handelConfig(row){
                if(!row.isOnline){
                    // 设备不在线，不支持此操作
                    this.W.$tips('warning', this.i18n.t('This operation is not supported because the device is offline'));
                    return
                }
                this.configFlag=true;
                this.editTableRow = row;
                // console.log(2222);
            },
            searchDevice(){
                this.searchFlag=true
                // this.W.$tips('warning', '未实现22');
            },
            addTableData() {
                // this.title = '新增';
                // this.clearformAdd()//新增前清空
                this.addFlag = true;
            },
            //  表格修改回调
            handelDetail(row) {
                this.detailData=row
                this.detaildialogVisible=true;
            },
            handelCh(){},
            handleSelectionChange(data) {
                this.selectRow = data;
            },
            //清空处理
            clearformAdd() {
                this.formAdd= {
                    workOrderJson:{
                        "deviceNumber":"",
                        "repairReason":"",
                        "contacts":"",
                        "contactNumber":""
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .gdgl-dialog{
        .title-tips-box{
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            .title-tips-icon{
                width: 4px;
                height: 15px;
                opacity: 1;
                background: rgb(55, 101, 215);
                margin-right: 10px;
            }
            .title-text{
                font-size: 16px;
                font-weight: 700;
            }
        }
        .bxyy-box{
            .el-select, .el-textarea{
                width: 620px!important;
            }
        }
        .img-box{
            ::v-deep .el-upload-list__item{
                width: 173px!important;
                height: 137px!important;
            }
            ::v-deep .el-upload--picture-card{
                width: 173px!important;
                height: 137px!important;
            }
        }

    }
    .gdgl-detail-dialog{
        .jbxx-box{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto;
            border-bottom: 1px dashed rgba(221, 221, 221, 1);
            .jbxx-item{
                display: flex;
                font-size: 16px;
                font-weight: 400;
                line-height: 36px;
                .label{
                    width: 110px;
                    margin-right: 10px;
                    text-align: right;
                    color: $--color-gray-blackBlue3;
                }
                .value{
                    flex: 1;
                    color: $--color-black-white;
                }
            }
        }
        .bxsm-box{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            border-bottom: 1px dashed rgba(221, 221, 221, 1);
            .jbxx-item{
                display: flex;
                font-size: 16px;
                font-weight: 400;
                line-height: 36px;
                .label{
                    width: 110px;
                    margin-right: 10px;
                    text-align: right;
                    color: $--color-gray-blackBlue3;
                }
                .value{
                    flex: 1;
                    color: $--color-black-white;
                }
            }
        }
        .slxx-box{
            display: grid;
            grid-template-columns: 249px 249px;
            grid-template-rows: auto;
            position: relative;
            .jbxx-item{
                display: flex;
                font-size: 16px;
                font-weight: 400;
                line-height: 36px;
                .label{
                    width: 110px;
                    margin-right: 10px;
                    text-align: right;
                    color: $--color-gray-blackBlue3;
                }
                .value{
                    flex: 1;
                    color: $--color-black-white;
                }
                time{
                    width: 200px;
                }
            }
            .status-box{
                position: absolute;
                width: 64px;
                height: 64px;
                border: 2px solid #727B8F;
                border-radius: 50%;
                right: 20px;
                top: 30px;
                .inborder{
                    width: 55px;
                    height: 55px;
                    border: 1px solid #727B8F;
                    border-radius: 50%;
                    position: absolute;
                    left: 2px;
                    top: 3px;
                    font-size: 16px;
                    font-weight: 700;
                    transform: rotate(-50deg);
                    text-align: center;
                    line-height: 47px;
                }
            }
        }
        .fj-box{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-auto-rows: auto;
            gap: 10px;
            margin-bottom: 10px;
            .item-img{
                width: 173px!important;
                height: 137px!important;
                .item-img-box{
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    &:hover{
                        .mask{
                            display: block;
                        }
                        color: red;
                    }
                }
                .mask{
                    display: none;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 173px;
                    height: 137px;
                    background:rgba(0,0,0,0.5);
                    z-index: 1;
                    line-height: 137px;
                    text-align: center;
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
    }
    ::v-deep .iconfont-KUI {
        margin-right: 5px;
    }
</style>
